@extends('admin.basev2')

@section('content')
    <style>
        .layui-btn-group .layui-btn {
            margin-left: 10px !important;
        }
        .layui-table-cell {
            height: inherit;
        }
        .layui-form-label {
            padding: 9px 0px;
            width: 42px;
        }
    </style>
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-btn-group">
                @can('changzu.renter.edit')
                    <a class="layui-btn layui-btn-sm" href="{{route('admin.renter.edit', ['renter_id' => $renter_id])}}">续 签</a>
                @endcan
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('changzu.renter.edit')
                        <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
                    @endcan
                    @can('changzu.renter.edit')
                        <a class="layui-btn layui-btn-sm" lay-event="we">月度费用</a>
                    @endcan
                </div>
            </script>
        </div>
    </div>
@endsection

@section('script')
        <script>
            layui.use(['layer', 'table'], function () {
                var $ = layui.jquery;
                var layer = layui.layer;
                var table = layui.table
                //用户表格初始化
                var dataTable = table.render({
                    elem: '#dataTable'
                    , autoSort: false
                    , height: "auto"
                    , url: "{{ route('admin.renter.contractData',['renter_id' => $renter_id])}}" //数据接口
                    , page: true //开启分页
                    , cols: [[ //表头
                        {field: 'id', title: '编号', width: 80, align: 'center'}
                        , {title: '合作日期', align: 'center', templet:function (d){
                                return d.starttime + " <br> " + d.endtime;
                            }}
                        , {title: '联系人', align: 'center', templet:function (d){
                                return d.linkman + " <br> " + d.telephone;
                            }}
                        , {title: '场租', align: 'center', templet:function (d){
                                if (d.rente_type){
                                    return d.rente_price;
                                }else{
                                    return '免租金';
                                }
                            }}
                        , {title: '物业', align: 'center', templet:function (d){
                                if (d.property_type){
                                    return d.property_price;
                                }else{
                                    return '免物业';
                                }
                            }}
                        , {title: '运营模式', align: 'center', templet:function (d){
                                if (d.operation_type == 1){
                                    return '运营模式A：' + d.operation_price1 + '-' + d.operation_price2;
                                } else if (d.operation_type == 2){
                                    return '运营模式B：' + d.operation_price1 + '-' + d.operation_price2;
                                }else{
                                    return '自运营';
                                }
                            }}
                        , {fixed: 'right', title: '管理', width: 250, align: 'center', toolbar: '#options'}
                    ]]
                });
                //监听工具条
                table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                    var datac = obj.data //获得当前行数据
                        , layEvent = obj.event; //获得 lay-event 对应的值
                    if (layEvent === 'edit') {
                        location.href = '/admin/renter/edit?contract_id=' + datac.id;
                    }
                    if (layEvent === "we") {
                        layer.open({
                            type: 2,
                            title: '新增月度费用',
                            fixed: false,
                            area: ['30%', '700px'],
                            btn: ['确定'],
                            content: '/admin/renter/weHtml?contract_id=' + datac.id,
                            success:function (layero) { //成功弹窗执行
                                layero.find('.layui-layer-btn').css('text-align', 'center')
                            },
                            yes:function (index, layero) { //点击btn执行
                                var body = layer.getChildFrame('body',index);
                                var data = body.find('.layui-input').serializeArray(); //拿到弹窗的值
                                var formData = {};
                                for(var i = 0; i < data.length; i++){
                                    formData[data[i].name] = data[i].value
                                }
                                if(!formData.images_url){
                                    layer.alert('请上传凭证', {icon: 2});return false;
                                }
                                //发送表单数据到服务器
                                layui.$.ajax({
                                    url: '/admin/renter/weStore?contract_id=' + datac.id,
                                    type: 'POST',
                                    data: formData,
                                    success: function (res) {
                                        if (res.code == 0) {
                                            layer.msg(
                                                res.msg, {icon: 1, time: 1500},
                                                layer.close(index)
                                            )
                                        } else {
                                            layer.msg(
                                                res.msg, {icon: 5},
                                            )
                                        }
                                    }
                                })
                            }
                        });
                    }
                });
            })
        </script>
@endsection
